<template>
  <el-dialog
    title="巡查记录详情"
    :visible.sync="dialog"
    width="90%"
    @close="close"
    @closed="close"
    :close-on-click-modal="false"
    append-to-body
    :destroy-on-close="true"
    top="10vh"
  >
    <div class="app-container">
      <div style="margin-left: 20px; color: #fff">
        <el-row>
          <el-col :span="12"
            ><label
              ><span style="font-size: 20px"
                >{{ schoolName }}——{{ lineName }}</span
              ></label
            >
          </el-col>
        </el-row>
        <el-row style="margin: 5px 0">
          <el-col :span="12"
            ><span style="font-size: 16px"
              >状态：
              <span v-if="abnormalCount == 0" style="color: #07a387">正常</span>
              <span v-else-if="abnormalCount > 0" style="color: #e94242"
                >{{ abnormalCount }}项异常({{ abnormalSites }})</span
              >
            </span></el-col
          >
        </el-row>
        <el-row style="font-size: 14px; margin: 5px 0">
          <span style="margin-right: 40px">人员(小组)：{{ record.user }}</span>
          <span>巡查时间：{{ record.date }}</span>
        </el-row>
      </div>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12" style="height: 600px; overflow-y: auto">
          <div class="block">
            <el-timeline>
              <el-timeline-item
                v-for="(detail, index) in recordDetailList"
                :key="index"
                color="#1E8BFC"
                hide-timestamp
                :timestamp="detail.updateTime"
                style="margin-left: 5px"
              >
                <el-row style="margin-bottom: 5px; color: #fff">
                  <el-col :span="24" style="font-size: 14px">
                    <span
                      style="margin-right: 40px"
                      v-if="detail.state != -1"
                      >{{ detail.updateTime.substring(11, 16) }}</span
                    >
                    <span style="margin-right: 40px">{{
                      "打卡点位：" + detail.index
                    }}</span>
                    <span style="margin-right: 40px">{{
                      detail.siteName
                    }}</span>
                    <span style="margin-right: 40px"
                      ><span>状态：</span
                      ><span v-if="detail.state == 0" style="color: #07a387"
                        >正常</span
                      >
                      <span
                        style="color: #e94242"
                        v-else-if="detail.state == 1 || detail.state == 2"
                        >异常</span
                      >
                      <span v-if="detail.state == 2"
                        >(已处理<span
                          v-if="
                            detail.handleInfo != null && detail.handleInfo != ''
                          "
                          >， 处理结果：{{ detail.handleInfo }}</span
                        >)</span
                      ><span
                        v-else-if="detail.state == -1"
                        style="color: #e94242"
                        >未巡查</span
                      >
                    </span>
                    <span style="margin-right: 40px"
                      ><span v-if="detail.state != -1">巡查人员：</span
                      >{{ detail.updateBy }}</span
                    >
                    <span
                      v-if="detail.state == 1 || detail.state == 2"
                      style="margin-right: 40px"
                      >原因：<span style="color: #e94242">{{
                        detail.remark
                      }}</span></span
                    >
                    <!-- <el-button
                      v-if="detail.state == 1"
                      size="mini"
                      type="success"
                      @click="handleAbnormal(detail)"
                      >处理
                    </el-button> -->
                  </el-col>
                </el-row>
                <el-row style="margin-bottom: 5px">
                  <el-image
                    v-if="detail.photoUrl != null"
                    style="width: 90px; height: 90px; border-radius: 10px"
                    :src="detail.photoUrl"
                    :preview-src-list="srcList"
                  >
                  </el-image>
                  <el-image
                    v-else-if="detail.photoUrl == null"
                    style="width: 90px; height: 90px; border-radius: 10px"
                    :src="require('@/assets/dp/zwtp.png')"
                  >
                  </el-image>
                </el-row>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
        <el-col :span="12">
          <div id="container" />
        </el-col>
      </el-row>

      <el-dialog
        title="异常处理"
        :visible.sync="open"
        width="500px"
        append-to-body
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="80px"
          @submit.native.prevent
          @keyup.enter.native="addHandleInfo"
        >
          <el-form-item label="处理结果" prop="handleInfo">
            <el-input
              maxlength="200"
              type="textarea"
              autosize
              v-model="form.handleInfo"
              placeholder="请输入200个以内的数字/常用文字/中文符号"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addHandleInfo">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="close" style="background: #083f79; color: #fff"
        >取 消</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { parseTime } from "@/utils/ruoyi.js";
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "47f39bbd3f47b91d1cbb2311453a0b4e",
};
export default {
  props: {
    dialogVisible: Boolean,
    patruldetail: Array,
    schoolName: String,
    lineName: String,
  },
  data() {
    return {
      //控制弹框
      dialog: this.dialogVisible,
      // 巡查线路与安保人员关联表格数据
      recordDetailList: [],
      srcList: [],
      record: {},
      abnormalCount: 0,
      abnormalSites: "",
      form: {},
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {},
      rules: {
        handleInfo: [
          {
            pattern:
              /^((\w|[\u4E00-\u9FFF]|[\u3000-\u301e\ufe10-\ufe19\ufe30-\ufe44\ufe50-\ufe6b\uff01-\uffee]){0,200})$/,
            message: "请输入200个以内的数字/常用文字/中文符号",
          },
        ],
      },
      // 地图相关
      map: null,
      marker: null,
      gps: {
        name: [],
        itme: [],
        dian: [],
      },
    };
  },
  watch: {
    dialogVisible() {
      this.dialog = this.dialogVisible;
    },
    // patruldetail() {

    // },
  },
  created() {
    this.getList();
  },
  methods: {
    close() {
      this.$emit("update:dialogVisible", false);
    },
    /** 查询巡查线路与安保人员关联列表 */
    getList() {
      let hastim = [];
      let notime = [];

      this.recordDetailList = this.patruldetail;
      let bool = this.recordDetailList.some((item) => {
        return item.state !== 0;
      });
      this.recordDetailList.forEach((e, i) => {
        this.recordDetailList[i].index = i + 1;
        // console.log(e)
        this.srcList.push(e.photoUrl);
        if (e.state !== -1) {
          this.gps.dian.push([parseFloat(e.longitude), parseFloat(e.latitude)]);
          this.gps.name.push(e.siteName);
          this.gps.itme.push(i + 1);
        }
        if (bool) {
          if (e.state === 1) {
            this.abnormalCount++;
            this.abnormalSites += e.siteName + "、";
          }
        } else {
          this.abnormalCount = 0;
        }
        if (e.updateTime) {
          hastim.push(e);
        } else {
          notime.push(e);
        }
      });

      if (this.abnormalSites.length > 1) {
        this.abnormalSites = this.abnormalSites.substring(
          0,
          this.abnormalSites.length - 1
        );
      }
      hastim.sort((a, b) => {
        return Date.parse(a.updateTime) - Date.parse(b.updateTime);
      });
      if (notime) {
        hastim.push(...notime);
      }
      this.recordDetailList = hastim;
      this.record.user = this.recordDetailList[0].updateBy;
      this.record.date = parseTime(
        this.recordDetailList[0].updateTime,
        "{y}-{m}-{d}"
      );
      this.initMap();
    },
    handleAbnormal(detail) {
      this.form = detail;
      this.open = true;
    },
    cancel() {
      this.open = false;
    },
    addHandleInfo() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateDetail(this.form).then((response) => {
            this.form.state = 2; //状态改为已处理
            this.open = false;
            this.msgSuccess("处理成功");
            this.reset();
            this.getList();
            this.form = {};
          });
        }
      });
    },
    reset() {
      this.recordDetailList = [];
      this.srcList = [];
      this.record = {};
      this.abnormalCount = 0;
      this.abnormalSites = "";
    },
    initMap(lng, lat) {
      AMapLoader.load({
        key: "a423874b07f076758138f4d36f6f74df",
        version: "2.0",
        plugins: ["AMap.Scale", "AMap.HawkEye", "AMap.MapType"],
      })
        .then((AMap) => {
          // 初始化地图
          this.map = new AMap.Map("container", {
            viewMode: "2D",
            zoom: 13,
            // 江北区人民政府
            // center: [106.580323, 29.612549],
            center: this.gps.dian[0],
            resizeEnable: true,
          });
          if (lng && lat) {
            this.map.setCenter([lng, lat], false, 100);
            this.marker = new AMap.Marker({
              position: [lng, lat],
            });
            this.map.add(this.marker);
            this.map.add(this.circle);
          }
          this.map.addControl(new AMap.MapType({ defaultType: 1 }));
          this.map.addControl(new AMap.Scale());
          this.map.addControl(
            new AMap.HawkEye({
              isOpen: true,
            })
          );
          var lnglats = this.gps.dian;
          var markers = [];
          for (var i = 0; i < lnglats.length; i++) {
            var lnglat = lnglats[i];
            // 创建点实例
            // var marker = new AMap.Marker({
            //   position: new AMap.LngLat(lnglat[0], lnglat[1]),
            //   icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b' + (i + 1) + '.png',
            //   extData: {
            //     id: i + 1
            //   }
            // });
            var markerContent =
              "" +
              '<div class="custom-content-marker" style="text-align: center;width: 30px;height: 30px; background-size: 100% 100%;background-image: url(\'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png\')">' +
              '<span style="color: white">' +
              this.gps.itme[i] +
              "</span>" +
              "</div>";

            var marker = new AMap.Marker({
              position: new AMap.LngLat(lnglat[0], lnglat[1]),
              // 将 html 传给 content
              content: markerContent,
              // 以 icon 的 [center bottom] 为原点
              offset: new AMap.Pixel(-13, -30),
            });
            var div =
              "<div className='info' style='text-shadow:-1px 0 white,0 1px white,1px 0 white,0 -1px white;'>" +
              this.gps.name[i] +
              "</div>";
            marker.setLabel({
              direction: "right",
              offset: new AMap.Pixel(-1, 0), //设置文本标注偏移量
              content: div, //设置文本标注内容
            });
            markers.push(marker);
          }
          var overlayGroups = new AMap.OverlayGroup(markers);
          this.map.add(overlayGroups);
          // this.map.on('click', this.addMarker);
          // this.searchMap();
          this.map.setFitView(null, false, [150, 60, 100, 60]);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
  background: #083f79;
  color: #fff;
}
::v-deep .el-dialog__title {
  color: #fff;
}

#container {
  overflow: hidden;
  width: 100%;
  height: 600px;
  margin: 0;
  font-family: "微软雅黑";
}
</style>
<style>
.amap-marker-label {
  border: 0;
  background-color: transparent;
}

.el-image-viewer__img {
  max-height: 80% !important;
}
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}

/* 高德搜索栏层级 */
.amap-sug-result {
  z-index: 2999 !important;
}
.amap-ctrl-overlay-layer {
  display: none !important;
}
.amap-ui-ctrl-layer-base-item input {
  appearance: auto;
}
</style>
